<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.dataprocessing.js"></script>
        <script type="text/javascript" >
            $(document).ready(function() {

                var todosJSON = [
                    {"name":"TODO #1", "deadline":"12:00 13.04.2012", "description":"My fisrt todo. Hell yeah!",
                        "isUrgent":true,"isImportant":false,"isActive":true,"state":"Pending","tags":"bla bla bla"},
                    {"name":"TODO #2", "deadline":"12:00 13.04.2012", "description":"My second todo. Hell yeah!",
                        "isUrgent":true,"isImportant":false,"isActive":true,"state":"Pending","tags":"bla bla bla"},
                    {"name":"TODO #3", "deadline":"12:00 13.04.2012", "description":"My third todo. Hell yeah!",
                        "isUrgent":true,"isImportant":false,"isActive":true,"state":"Pending","tags":"bla bla bla"},
                    {"name":"TODO #4", "deadline":"12:00 13.04.2012", "description":"My fourth todo. Hell yeah!",
                        "isUrgent":true,"isImportant":false,"isActive":true,"state":"Pending","tags":"bla bla bla"},
                    {"name":"TODO #5", "deadline":"12:00 13.04.2012", "description":"My fifth todo. Hell yeah!",
                        "isUrgent":true,"isImportant":false,"isActive":true,"state":"Pending","tags":"bla bla bla"}
                ];

                var result = $.processData(todosJSON, {
                    sort: true,
                    sortBy: 'name',
                    sortDir: 'DESC',
                    filter: true,
                    filterBy: 'name',
                    filterCriteria: '5'
                });
                console.log(result);
            });
        </script>
        <style type="text/css">
            table.todo-instance {
                border: 1px solid #E5E5E5;
                border-collapse: collapse;
                background: #FAF7F7;
                width: 660px;
                margin: 25px;
                padding: 0px 20px;
            }
            table.todo-instance td#todo-active-checkbox {
                border: 1px solid #E5E5E5;
                text-align: center;
                vertical-align: top;
            }
            table.todo-instance td#todo-date {
                text-transform: capitalize;
            }
            table.todo-instance td#todo-date {
                border-bottom: 1px solid #E5E5E5;
            }
            table.todo-instance td#todo-tags {
                border: 1px solid #E5E5E5;
                font-style: italic;
            }
            table.todo-instance td#todo-list {
                border: 1px solid #E5E5E5;
            }
            table.todo-instance td#todo-list ul {
                list-style-type: none;
                list-style-position: inside;
                padding: 0;
                margin: 0;
            }
             table.todo-instance td#todo-state {
                border: 1px solid #E5E5E5;
                text-align: center;
            }
            table.todo-instance td#description {
                border: 1px solid #E5E5E5;
                text-align: justify;
            }
        </style>
    </head>
    <body>
        <div class="result">TODO write content</div>

        <table class="todo-instance">
            <tr>
                <td rowspan="3" id="todo-active-checkbox"><input type="checkbox" name="active" value="ON" /></td>
                <td colspan="3" id="todo-name">--------------NAME--------------</td>
            </tr>
            <tr>
                <td colspan="3" id="todo-date">--------------DATE--------------</td>
            </tr>
            <tr>
                <td id="todo-tags">--------------TAGS--------------</td>
                <td id="todo-list">
                    <ul>
                        <li><input type="checkbox" name="urgent" value="ON" /> urgent</li>
                        <li><input type="checkbox" name="important" value="ON" /> important</li>
                    </ul>
                </td>
                <td id="todo-state">STATE</td>
            </tr>
            <tr>
                <td colspan="4" id="todo-description">DESCRIPTION</td>
            </tr>
        </table>

    </body>
</html>
